<!-- 楼层管理的基础页面 -->
<template>
  <div class="FloorPage-container">
    <TitleBar title="楼层管理"></TitleBar>
    <div class="management">
        <ManagementVue :dormitoryInfo="readUserInfo.manageArr" @getDormitoryId="getDormitoryId"></ManagementVue>
    </div>
    <TitleBar title="楼层信息"></TitleBar>
    <div class="info">
        <InfoVue :FloorInfo="FloorDataRef" :isLoading="isLoadingRef">
            <template #default="{data}">
                <slot :data="data"></slot>
            </template>
        </InfoVue>
    </div>
  </div>
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue"
import InfoVue from "./Info.vue"
import ManagementVue from "./Management.vue"
import {useUserStore} from "@/store/useUserStore.js"
import {storeToRefs} from "pinia"
import {getFloor} from "@/api/dormitoryInfo.js"
import { ref } from "vue"
const isLoadingRef = ref(false) 
const {readUserInfo} = storeToRefs(useUserStore())
const FloorDataRef = ref([])
const getDormitoryId = async (id) =>{
    isLoadingRef.value = true
    const {data} = await getFloor({dormitoryId:id})
    FloorDataRef.value = data
    isLoadingRef.value = false
}
defineExpose({
    getDormitoryId
})


</script>

<style lang="less" scoped>
.FloorPage-container{
    width: 100%;
    
}
</style>